<template>
    <div id="dashboardPage">
        <mu-row>
            <mu-col span="12" md="6">
                <div id="myCharts" class="chartBox mdui-card"></div>
            </mu-col>
            <mu-col span="12" md="6" class="rightBox">
                <mu-row>
                    <mu-col span="12" md="12" style="margin-bottom: 20px;">
                        <div id="myCharts2" class="chartBox chartBox-half mdui-card"></div>
                    </mu-col>
                    <mu-col span="12" md="12">
                        <div id="myCharts3" class="chartBox chartBox-half mdui-card"></div>
                    </mu-col>
                </mu-row>
            </mu-col>
        </mu-row>
    </div>
</template>

<script>
// 引入echarts基本模板
let echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/bar");
require("echarts/lib/chart/pie");
require("echarts/lib/chart/gauge");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");

export default {
    data() {
        return {
            inputValue: "",
            myCharts: "",
            myCharts2: "",
            myCharts3: "",
        };
    },
    computed: {},
    mounted() {
        let _this = this;

        this.myCharts = echarts.init(document.querySelector("#myCharts"));
        this.myCharts2 = echarts.init(document.querySelector("#myCharts2"));
        this.myCharts3 = echarts.init(document.querySelector("#myCharts3"));
        this.initCharts(this.myCharts);
        this.initCharts(this.myCharts2);
        this.initCharts(this.myCharts3);

        window.addEventListener("resize", function () {
            _this.myCharts.resize();
            _this.myCharts2.resize();
            _this.myCharts3.resize();
        });
    },
    updated() {},
    methods: {
        inputToSlot() {
            let _this = this;
            this.$swal({
                title: "写点什么吧...",
                timer: null,
                input: "text",
                inputValue: "",
                showConfirmButton: true,
                inputValidator: (value) => {
                    if (!value) {
                        return "You need to write something!";
                    }
                    _this.inputValue = value;
                },
            });
        },
        initCharts(chartsId) {
            let option = {};
            if (chartsId == this.myCharts) {
                option = {
                    xAxis: {
                        type: "category",
                        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                    },
                    yAxis: {
                        type: "value",
                    },
                    series: [
                        {
                            data: [120, 200, 150, 80, 70, 110, 130],
                            type: "bar",
                            showBackground: true,
                            backgroundStyle: {
                                color: "rgba(220, 220, 220, 0.8)",
                            },
                        },
                    ],
                };
            } else if (chartsId == this.myCharts2) {
                option = {
                    tooltip: {
                        trigger: "item",
                        formatter: "{a} <br/>{b}: {c} ({d}%)",
                    },
                    legend: {
                        orient: "vertical",
                        left: 10,
                        data: [
                            "直接访问",
                            "邮件营销",
                            "联盟广告",
                            "视频广告",
                            "搜索引擎",
                        ],
                    },
                    series: [
                        {
                            name: "访问来源",
                            type: "pie",
                            radius: ["50%", "70%"],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: "center",
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: "16",
                                    fontWeight: "bold",
                                },
                            },
                            labelLine: {
                                show: false,
                            },
                            data: [
                                { value: 335, name: "直接访问" },
                                { value: 310, name: "邮件营销" },
                                { value: 234, name: "联盟广告" },
                                { value: 135, name: "视频广告" },
                                { value: 1548, name: "搜索引擎" },
                            ],
                        },
                    ],
                };
            } else if (chartsId == this.myCharts3) {
                option = {
                    tooltip: {
                        formatter: "{a} <br/>{b} : {c}%",
                    },
                    toolbox: {
                        feature: {
                            restore: {},
                            saveAsImage: {},
                        },
                    },
                    series: [
                        {
                            name: "业务指标",
                            type: "gauge",
                            detail: { formatter: "{value}%" },
                            data: [{ value: 72, name: "进度" }],
                        },
                    ],
                };
            }
            chartsId.setOption(option);
        },
    },
};
</script>

<style scoped lang="less">
#dashboardPage {
    .rightBox {
        padding-left: 20px;
    }
    .chartBox {
        width: 100%;
        height: 60vh;
    }
    .chartBox-half {
        height: calc(30vh - 10px);
    }
}
@media screen and (max-width: 1024px) {
    #dashboardPage {
        .rightBox {
            padding-left: 0;
        }
    }
}
</style>